<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"> <span>{{user.nickname}}</span></i>
            <el-dropdown-menu slot="dropdown">
              <a href="#" @click="logout"><el-dropdown-item>退出</el-dropdown-item></a>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="电影名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="海报" prop="pic">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/film/upload/pic"
                :show-file-list="false"
                :on-success="handleAvatarPicSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="pic" :src="pic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="简介" prop="introduction">
            <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
          </el-form-item>
          <el-form-item label="电影时长" prop="duration">
            <el-input v-model="ruleForm.duration"></el-input>
          </el-form-item>
          <el-form-item label="导演" prop="director">
            <el-input v-model="ruleForm.director"></el-input>
          </el-form-item>
          <el-form-item label="演员" prop="actor">
            <el-input v-model="ruleForm.actor"></el-input>
          </el-form-item>
          <el-form-item label="电影资源" prop="resource">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/film/upload/resource"
                :show-file-list="false"
                :on-success="handleAvatarResourceSuccess"
                :before-upload="beforeAvatarUpload">
<!--              <img v-if="resource" :src="resource" class="avatar">-->

                <!--
                <video :src="videoSrc" :poster="videoImg" :autoplay="playStatus" height="421" width="700" :muted="muteStatus">
                  your browser does not support the video tag
                </video>
                <button @click="playClick" :class="{hide: isPlay}">点击播放</button> -->
                <!--class="video-js vjs-default-skin vjs-big-play-centered" -->
                <video  v-if="resource"  :preload="preload" :poster="pic" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
                  <source :src= "resource" type="video/mp4">
                </video>

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="年代" prop="yearId">
            <el-select v-model="ruleForm.yearId" placeholder="请选择电影年代"   >
              <el-option :label="year.name" :value="year.id" v-for="year in years"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型" prop="classId">
            <el-select v-model="ruleForm.classId"  placeholder="请选择电影类型">
              <el-option :label="classification.name" :value="classification.id" v-for="classification in classifications"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from "../../components/Left";

export default {
  name: "EditFilm.vue",
  components: {Left},
  data() {
    return {
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '820', // 设置视频播放器的显示宽度（以像素为单位）
      height: '500', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: '',
      user: this.$store.getters.getUser,
      classifications: {},
      years:{},
      pic:'',
      resource:'',
      ruleForm: {
        id:'',
        name: '',
        pic:'',
        introduction:'',
        duration:'',
        director:'',
        actor:'',
        resource:'',
        yearId:'',
        classId:''
      },
      rules: {
        name: [
          { required: true, message: '请输入电影名称', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入电影简介', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '请输入电影时长', trigger: 'blur' }
        ],
        director: [
          { required: true, message: '请输入导演名称', trigger: 'blur' },
        ],
        actor: [
          { required: true, message: '请输入演员名称，多个用/分割', trigger: 'change' }
        ],
        yearId: [
          { required: true, message: '请选择电影年代', trigger: 'change' }
        ],
        classId: [
          { required: true, message: '请选择电影类型', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    logout() {
      debugger;
      const _this = this
      _this.$store.commit("REMOVE_INFO")
      _this.$router.push("/adminLogin")
    },
    getYears(){
      const _this = this
      _this.$axios.get("/year/list").then(res => {
        _this.years = res.data.data
      })
    },
    getClassifications(){
      const _this = this
      _this.$axios.get("/classification/list").then(res => {
        _this.classifications = res.data.data
      })
    },
    handleAvatarPicSuccess(res, file) {
      debugger;
      this.pic = URL.createObjectURL(file.raw);
      this.ruleForm.pic=res.data;
    },
    handleAvatarResourceSuccess(res, file) {
      debugger;
      this.resource = URL.createObjectURL(file.raw);
      this.ruleForm.resource=res.data;
    },

    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1000;


      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 1000MB!');
      }
      return  isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this=this
          debugger;
          const id = this.$route.params.id
          this.ruleForm.id=id
          this.$axios.post("/film/add",this.ruleForm).then(res =>{
            if(res.data.code===200){
              this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
              });
              _this.$router.push("/films")
            }else{
              this.$message.error(res.data.message);
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    this.getClassifications()
    this.getYears()
    const id = this.$route.params.id
    if(id){
      //异步请求查询film  //发送异步请求拿到电影数据
      this.$axios.get('/film/get/' + id).then(res => {
        const film = res.data.data
        this.ruleForm=film
        this.pic=film.pic
        this.resource=film.resource
      })
    }
  }
}
</script>
<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}


.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.logo {
  height: 90%;
  margin-top: 10px;
}
.demo-ruleForm{
  max-width: 500px;
  margin: 0 auto;
}
</style>